<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
    </head>
    <body>
        <div id="app">
            <coml @func="loadComments"></coml>


            <ul class="list-group">
                <li class="list-group-item" v-for="item in list" :key="item.id">
                    <span class="badge">评论人： {{ item.user }}</span>
                    {{ item.content }}
                </li>
            </ul>
            
        </div>


        <template id="tmpl"> 
            <div>
                <div class="form-group">
                    <label>评论人：</label>
                    <input type="text" class="form-control" v-model="user">
                </div>
                <div class="form-group">
                    <label>评论内容：</label>
                    <input type="text" class="form-control" v-model="content">
                </div>
                <div class="form-group">
                    <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
                </div>
            </div>
        </template>
        <script src="./lib/vue-2.4.0.js"></script>
        <script>
            var coml={
                template:'#tmpl',
                data(){
                    return {
                        user:'',
                        content:''
                    }
                },
                methods: {
                    postComment(){//发表评论
                        //1.评论数据先存放到localStorage中的localStorage.setItem('cmts','')
                        //2.组织一个评论对象;把对象保存到localStorage中；
                        //3.localStorage只支持存放字符串数据，药先调用JSON.stringify 
                        //4.保存最新品论数据之前，先从localStorage获取到品论数据(string)，
                        //转换为一个数组对象然后把最新评论push到这个数组中
                        //5.如果获取到的 localStorage 中的 评论字符串，为空不存在， 
                        //则  可以 返回一个 '[]'  让 JSON.parse 去转换
                        //6.把 最新的  评论列表数组，再次调用 JSON.stringify 
                        //转为  数组字符串，然后调用 localStorage.setItem()
                        var comment = { id: Date.now(), user: this.user, content: this.content }
                        // 从 localStorage 中获取所有的评论
                        var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                        list.unshift(comment)
                        // 重新保存最新的 评论数据
                        localStorage.setItem('cmts', JSON.stringify(list))
                        this.user=this.name=''
                        this.$emit('func')
                    }
                },
            }

            var vm = new Vue({
                el: '#app',
                data: {
                    list:[
                        { id: Date.now(), user: '李白', content: '天生我材必有用' },
                        { id: Date.now(), user: '江小白', content: '劝君更尽一杯酒' },
                        { id: Date.now(), user: '小马', content: '我姓马， 风吹草低见牛羊的马' }
                    ]
                },
                beforeCreate(){ 
                    // 注意：这里不能调用 loadComments 方法，因为在执行这个钩子函数的时候，data 和 methods 都还没有被初始化好
                },
                created(){
                    this.loadComments()
                },
                methods:{
                    loadComments() { // 从本地的 localStorage 中，加载评论列表
                        var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                        this.list = list
                    }
                },
                components:{
                    coml
                },

            })
        </script>
    </body>
</html>